<template>
  <div id="home">
    <el-row>
      <el-carousel ref="carousel" :height="pageHeight + 'px'" indicator-position="none" arrow="never" :interval="5000" @mouseenter.native="delHandleMouseEnter">
        <el-carousel-item>
          <div class="title_div">
            <div class="title_zh">数字化共享工厂</div>
            <div class="title_en">Digital shared factory</div>
          </div>
          <el-image :src="require('../assets/img/carousel1.jpg')" fit="fill" />
        </el-carousel-item>
        <el-carousel-item>
          <div class="title_div">
            <div class="title_zh">3C类与设备类产品总装代工</div>
            <div class="title_en">3C and equipment products assembly and OEM</div>
          </div>
          <el-image :src="require('../assets/img/carousel2.jpg')" fit="fill" />
        </el-carousel-item>
        <el-carousel-item>
          <div class="title_div">
            <div class="title_zh">3C产品研发设计制造</div>
            <div class="title_en">3C product development, design and manufacture</div>
          </div>
          <el-image :src="require('../assets/img/carousel3.jpg')" fit="fill" />
        </el-carousel-item>
      </el-carousel>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageHeight: 0
    }
  },
  mounted () {
    this.getPageHeight()
    this.delHandleMouseEnter()
    // 监控浏览器大小变化，调整页面的布局
    window.onresize = () => {
      this.getPageHeight()
    }
  },
  methods: {
    getPageHeight () {
      this.pageHeight = window.innerHeight
      if (window.innerWidth < 1800 && window.innerWidth > 1700) {
        this.pageHeight = 750
      } else if (window.innerWidth < 1700 && window.innerWidth > 1600) {
        this.pageHeight = 650
      } else if (window.innerWidth < 1600 && window.innerWidth > 1500) {
        this.pageHeight = 550
      } else if (window.innerWidth < 1500) {
        this.pageHeight = 450
      }
    },
    delHandleMouseEnter () {
      this.$refs.carousel.handleMouseEnter = () => { }
    }
  }
}
</script>
<style lang="less">
#home {
  .title_div {
    position: fixed;
    top: 50%;
    left: 15%;
    z-index: 999;
    .title_zh {
      color: white;
      font-size: 4vw;
      font-weight: bold;
    }
    .title_en {
      color: #F2F6FC;
      font-size: 3vw;
      font-weight: bold;
    }
  }
}
</style>
